<template>
    <div class="screen-header">
      <!-- 居中的主标题 -->
      <h1 class="main-title">
        {{ title }}
        <span class="title-glow"></span>
      </h1>
      
      <!-- 右侧时间（绝对定位，不影响标题居中） -->
      <div class="time-display">{{ currentTime }}</div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const props = defineProps({
    title: { type: String, default: '智慧车间监控中心' }
  });
  
  // 实时时间
  const currentTime = ref('');
  let timeTimer = null;
  
  const formatTime = () => {
    const date = new Date();
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    });
  };
  
  onMounted(() => {
    currentTime.value = formatTime();
    timeTimer = setInterval(() => currentTime.value = formatTime(), 1000);
  });
  
  onUnmounted(() => clearInterval(timeTimer));
  </script>
  
  <style scoped>
  /* 标题栏容器：确保标题居中 */
  .screen-header {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
    margin: 0 !important; /* 无外边距 */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* 强制水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative; /* 用于时间绝对定位 */
    line-height: 1;
  }
  
  /* 主标题：居中核心 */
  .main-title {
    position: relative;
    font-size: 2.8vw;
    color: #ffffff;
    margin: 0 !important; /* 移除默认margin */
    padding: 0;
    letter-spacing: 0.3vw;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(66, 165, 245, 0.6);
    text-align: center; /* 文字本身居中，增强兼容性 */
  }
  
  /* 标题动态光效 */
  .title-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(66, 165, 245, 0.4), transparent);
    animation: glowMove 8s infinite linear;
    pointer-events: none;
  }
  
  /* 时间显示：右上角绝对定位，不影响标题居中 */
  .time-display {
    position: absolute;
    right: 3vw; /* 固定在右侧，不占用居中空间 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中调整 */
    font-size: 1.2vw;
    color: #e0f0ff;
    margin: 0;
    padding: 0;
    letter-spacing: 0.1vw;
    text-shadow: 0 0 5px rgba(66, 165, 245, 0.3);
  }
  
  /* 光流动画 */
  @keyframes glowMove {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
  }
  
  /* 响应式适配 */
  @media (max-width: 1200px) {
    .main-title { 
      font-size: 2.3vw; 
      letter-spacing: 0.2vw;
    }
    .time-display { 
      font-size: 1.4vw; 
      right: 2vw;
    }
  }
  </style>